<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>还书登记</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="icon" href="images/returncheck.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Manager.html">返回上一页</a></li>
    <li><a href="">还书登记</a></li>
  </ul>
  <h1>借书详情：</h1>
  <div class="box">
    <form>
        <h2>登记还书信息:</h2>
          <div class="inputbox">
              <input type="text" size="30" id="cardId" maxlength="12" required>
              <label>借阅证id</label>
          </div>
          <div class="inputbox">
              <input type="text" size="30" id="bookId" maxlength="20" required>
              <label>被借图书ID</label>
          </div>
          <div class="inputbox">
              <input type="text" id="status" size="30" maxlength="20" required>
              <label>图书状态</label>
          </div>
        <input type="reset" value="重置">
        <input type="button" id="sure" value="登记">
    </form>
  </div>

</body>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  h1{
      text-align: center;
  }


  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  .box {
      position: absolute;
      /*定位方式绝对定位absolute*/
      top: 50%;
      left: 50%;
      /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
      transform: translate(-50%, -50%);
      /*实现块元素百分比下居中*/
      width: 450px;
      padding: 50px;
      background: rgba(0, 0, 0, .8);
      /*背景颜色为黑色，透明度为0.8*/
      box-sizing: border-box;
      /*box-sizing设置盒子模型的解析模式为怪异盒模型，
      将border和padding划归到width范围内*/
      box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
      /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
      border-radius: 15px;
      /*边框圆角，四个角均为15px*/
  }

  .box h2 {
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-align: center;
      /*文字居中*/
  }

  .box .inputbox {
      position: relative;
  }

  .box .inputbox input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      letter-spacing: 1px;
      /*字符间的间距1px*/
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      /*outline用于绘制元素周围的线
      outline：none在这里用途是将输入框的边框的线条使其消失*/
      background: transparent;
      /*背景颜色为透明*/
  }

  .box .inputbox label {
      /*<label> 标签为 input 元素定义标注（标记）*/
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      pointer-events: none;
      /*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
      transition: .5s;
      /*过渡时间5s*/
  }

  /*填完信息后，字体上浮*/
  .box .inputbox input:focus~label,
  .box .inputbox input:valid~label {
      top: -29px;
      left: 0;
      color: #03a9f4;
      font-size: 15px;
  }

  .box input[type="button"] {
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #03a9f4;
      padding: 15px 20px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      left: 200px;
  }

  .box input[type="reset"] {
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #03a9f4;
      padding: 15px 20px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      left: 0px;
  }

</style>
<script>

  $("#sure").click(function(){
    var recordBorrowAndReturn = {
      cardId:$("#cardId").val(),
      bookId:$("#bookId").val(),
      status:$("#status").val()
    }
    console.log(recordBorrowAndReturn.status)
      if(recordBorrowAndReturn.bookId!=""&&recordBorrowAndReturn.cardId!=""){
          $.ajax({
              type: 'post',//get是获取数据，post是带数据的向服务器发送请求
              url: 'http://localhost:8080/borrow/recordReturn',
              dataType: 'json',
              data: JSON.stringify(recordBorrowAndReturn),
              contentType: "application/json",
              success: function (res) {
                  console.log(res)
                  alert(res.msg)
                  window.location.href="ReturnCheck.html"
              },
              error: function () {
                  alert("请检查信息是否输入正确");
              }
          })
      }else {
          alert("借阅证id或被借图书id不能为空!")
      }

  });
</script>
</html>